<template>
  <div class="container" v-loading="loading">
    <div class="statusbar clearfix">
      <div class="w25 back" @click="fnBack()">
        <img src="../../assets/icon/back@2x.png" alt="">
        <span>返回</span>
      </div>
      <div class="w50 topcenter">
        <span>机构详情</span>
      </div>
    </div>
    <div class="lvtop">
      <div class="clearfix ">
        <img v-if="result1.type==1" src="../../assets/qwe.png">
        <img v-if='result1.type==0||result1.type==5' src="../../assets/zg.jpg">
        <img v-if='result1.type==2' src="../../assets/jicen.jpg">
        <div class="fl" style="width:74%">
          <h3 class="namsd">名称：{{result1.name}}</h3>
          <p class="time">成立时间：{{result1.creationTime|yy}}</p>
          <p class="time">团队规模：{{result1.memberCount}}</p>
          <p class="time">地址：{{result1.address}}</p>
          <p class="time">电话：{{result1.tel}}</p>
        </div>
      </div>
    </div>
    <div class="topRe">
      <p class="members">机构成员</p>
      <div class="page-loadmore-wrapper">
        <mt-loadmore :bottomPullText='bottomPullText' :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
          <ul>
            <li v-for="item in result" :key="item.id">
              <router-link v-bind="{to:'/AgenMyDetail/'+(item.id)}" class="clearfix">
                <img v-if="item.avatar" v-lazy='item.avatar' class="imgLs">
                <img v-else src="../../assets/qwe1.png" class="imgLs">
                <div class="fl lvList">
                  <p>{{item.userName}}</p>
                  <p>{{item.serviceAgencyName}}</p>
                </div>
                <div class="fr lvyear">
                  <span>{{item.year}}</span>年从业
                </div>
              </router-link>
            </li>
          </ul>
        </mt-loadmore>
        <p class="page-footer" v-if="tip">到底了</p>
        <p class="page-footer" v-if="datalist">暂无人员</p>
      </div>
    </div>
  </div>
</template>
<script>
import Api from "../../kites/api";
export default {
  name: "AgencyDetails",
  data() {
    return {
      datalist: false,
      tip: false,
      searchs: "",
      id: "",
      loading: false,
      pages: 10,
      pageindex: 1,
      totalCount: "",
      Articles: [],
      result: [],
      result1: {}, //事务所信息
      page1: {
        height: ""
      },
      allLoaded: false,
      bottomPullText: "加载更多"
    };
  },
  //		beforeRouteLeave(to, from, next) {
  //			if(to.path == "/Agency/22") {
  //				from.meta.keepAlive = false;
  ////				this.$store.commit('jgxqtoggle',true)
  //			} else{
  //				from.meta.keepAlive = true;
  ////				this.$store.commit('jgxqtoggle',false)
  //			}
  //			next();
  //		},
  beforeCreate() {
    this.openIds();
  },
  mounted() {},
  created() {
    this.id = this.$route.params.id;
    this.GetServiceAgencyMembers();
    this.GetServiceAgency();
    this.setHeight();
  },
  methods: {
    setHeight() {
      this.page1.height =
        document.documentElement.scrollHeight - 40 - 165 - 60 + "px";
    },
    //返回上一页
    fnBack() {
      this.$route.meta.keepAlive = false;
      this.$router.go(-1);
    },
    // 获取事务所信息
    GetServiceAgency() {
      this.loading = true;
      this.$post(Api.GetServiceAgency, {
        id: this.id,
        filter: "",
        sorting: "",
        maxResultCount: 0,
        skipCount: 0
      }).then(res => {
        console.log(res);
        if (res.data.success == true) {
          this.loading = false;
          this.result1 = res.data.result;
        } else {
          this.loading = false;
          this.$message.error(res.data.error);
        }
      });
    },
    //获取列表
    GetServiceAgencyMembers() {
      this.tip = false;
      this.pages = 10;
      this.pageindex = 1;
      this.totalCount = 0;
      this.loading = true;
      this.$post(Api.GetServiceAgencyMembers, {
        id: this.id,
        filter: "",
        sorting: "",
        maxResultCount: this.pages,
        skipCount: this.pages * (this.pageindex - 1)
      }).then(res => {
        console.log(res);
        if (res.data.success == true) {
          this.loading = false;
          this.result = res.data.result.items;
          console.log(this.result);
          this.totalCount = res.data.result.totalCount;
          if (this.totalCount == 0) {
            this.datalist = true;
          }
        } else {
          this.loading = false;
          this.$message.error(res.data.error);
        }
      });
    },
    //下拉加载
    loadBottom() {
      this.pageindex++;
      this.loading = true;
      this.$post(Api.GetServiceAgencyMembers, {
        id: this.id,
        filter: "",
        sorting: "",
        maxResultCount: this.pages,
        skipCount: this.pages * (this.pageindex - 1)
      }).then(res => {
        console.log(res);
        if (res.data.success == true) {
          this.loading = false;
          this.totalCount = res.data.result.totalCount;
          this.result = this.result.concat(res.data.result.items);
          this.$refs.loadmore.onBottomLoaded();
          if (this.totalCount == this.result.length) {
            this.tip = true;
            this.allLoaded = true;
          }
        } else {
          this.loading = false;
          this.allLoaded = true; // 若数据已全部获取完毕
          this.$refs.loadmore.onBottomLoaded();
          this.$message.error(res.data.error);
        }
      });
    }
  }
};
</script>
<style scoped>
.page-loadmore-wrapper {
  overflow: scroll;
}
.lvtop {
  text-align: left;
  padding-left: 15px;
  background: #fff;
  width: 100%;
  margin-top: 3.5rem;
  padding-top: 10px;
  line-height: 2.6rem;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.lvtop h3 {
  font-size: 16px;
  color: #333333;
}

.lvtop p {
  color: #808080;
}
.lvtop  img{
  float: left; 
  width: 22%;
  margin-right: 10px;
}

.topRe {
  width: 100%;
  background: #fff;
  padding-left: 15px;
  box-sizing: border-box;
  padding-right: 15px;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.topRe > p {
  line-height: 3.6rem;
}

.topRe li {
  padding: 15px;
  border-bottom: 1px solid #cdd5e7;
}

.topRe li:last-child {
  border: none;
}

.lvList {
  text-align: left;
}

.imgLs {
  float: left;
  height: 40px;
  margin-right: 5%;
}
image[lazy="loading"] {
  float: left;
  height: 40px;
  margin-right: 5%;
}
.lvList p:nth-of-type(1) {
  color: #333333;
  font-size: 1.5rem;
  margin-bottom: 3px;
}

.lvList p:nth-of-type(2) {
  color: #808080;
  font-size: 1rem;
}

.lvyear {
  color: #808080;
}

.lvyear span {
  font-size: 1.5rem;
  font-weight: 500;
  color: #808080;
}

.tip {
  line-height: 30px;
  background: #f1f1f1;
  text-align: center;
  margin-top: 8px;
}

.page {
  /* height: 32rem; */
  /* height: 28.2rem; */
  position: relative;
  /* Prevent native touch events on Windows */
  -ms-touch-action: none;
  /* Prevent the callout on tap-hold and text selection */
  -webkit-touch-callout: none;
  user-select: none;
  text-size-adjust: none;
}
/*scrollbar start*/

.iScrollVerticalScrollbar {
  position: absolute;
  z-index: 9999;
  width: 2px;
  bottom: 2px;
  top: 2px;
  right: 2px;
  overflow: hidden;
}

.iScrollVerticalScrollbar.iScrollBothScrollbars {
  bottom: 18px;
}

.iScrollIndicator {
  position: absolute;
  background: #999;
  border-radius: 6px;
  opacity: 0.8;
}

.iScrollVerticalScrollbar .iScrollIndicator {
  width: 100%;
  background: #999;
}
.page-footer {
  margin-top: 15px;
  padding-bottom: 15px;
}
.members{
color: rgb(57, 88, 158); 
font-weight: 600;
font-size: 1.5rem;
text-align: left;
}
</style>